<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>欢迎使用CRM管理系统</title>
    <link rel="stylesheet" href="${basePath }/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="${basePath }/css/style.css" type="text/css" />
    <link rel="stylesheet" href="${basePath }/css/colorPicker.css" type="text/css" />
	<script type="text/javascript" src="${basePath }/My97/WdatePicker.js"></script>
    <script type="text/javascript" src="${basePath }/js/jquery.min.js"></script>
    <script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${basePath }/js/jquery.colorPicker.min.js"></script>
</head>
<body>
	<div class="navbar">
        <div class="navbar-inner">
            <div class="container">
               	<a href="${basePath }/message" class="brand">凯盛CRM管理系统</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="${basePath }/message">最新动态</a></li>
						<li><a href="${basePath }/contacts/list">联系人</a></li>
						<li class="active"><a href="${basePath }/task/list">日程安排</a></li>
						<li><a href="${basePath }/deal/list">业务机会</a></li>
						
                    </ul>
                    <ul class="nav pull-right">
                        <li><a href="#">${user.username }</a>
                        <li class="divider-vertical"></li>
                        <li><a href="${basePath }/user/info">账号设置</a></li>
                        <li><a href="${basePath }/user/loginout">退出</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="content" class="container">
        <div class="span9">
            <ul class="breadcrumb" style="vertical-align:top">
                <li class="active">添加日程</li>
            </ul>
            <div class="well">
                <form id="myform" class="form-horizontal" action="${basePath }/task/savetask" method="post">
                    <fieldset>
                        <div class="control-group" id="titleDiv">
                            <label class="control-label" for="name">日程安排</label>
                            <div class="controls">
                                <input type="text" id="title" class="input-xlarge"  name="task.title">
                            </div>
                        </div>
                        
						<div class="control-group" >
                            <label class="control-label" for="company">联系人</label>
                            <div class="controls">                               
								<select name="contactsId" style="width:280px;">
									<option>--选择联系人--</option>
									<c:forEach var="contacts" items="${contactsList}">
										<option value="${contacts.id }">${contacts.name }</option>
									</c:forEach>
								</select>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="company">负责人</label>
                            <div class="controls">                               
								<select name="userId" style="width:280px;">
									<option>--选择负责人--</option>
									<c:forEach var="user" items="${userList}">
										<option value="${user.id }">${user.username }</option>
									</c:forEach>
								</select>
                            </div>
                        </div>
						<div class="control-group">
                            <label class="control-label" for="company">类型</label>
                            <div class="controls">                               
								<select name="taskTypeId" style="width:280px;" id="typeSelect">
									<option>--选择类型--</option>
									<c:forEach var="tasktype" items="${taskType }">
										<option value="${tasktype.id }">${tasktype.type }</option>
									</c:forEach>
									<option id="showModal">新建类型</option>
								</select> 
                            </div>
                        </div>
                        <div class="control-group" id="startDiv">
							<label class="control-label" for="startTime">任务开始时间</label>
							<div class="controls">
								<input id="start" type="text" class="input-xlarge" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
									name="task.startDate">
							</div>
						</div>
						<div class="control-group" id="endDiv">
							<label class="control-label">任务结束时间</label>
							<div class="controls">
								<input type="text" id="end" class="input-xlarge" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
									name="task.endDate">
								<span id="error"></span>	
							</div>
						</div>
						<div class="control-group">
						<label class="control-label" for="optionsCheckbox">是否所有人可见</label>
							<div class="controls">
								<label class="checkbox">
									<input name="task.all" value="true" type="radio"> 是
								</label>
								<label class="checkbox">
									<input name="task.all" value="false" type="radio"> 否
								</label>
							</div>
						</div>
                        <div class="form-actions">
                            <button class="btn btn-primary" type="button" id="btn">保存</button>
                            <a href="${basePath }/task/list" class="btn">返回</a>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
        
        <div class="span3 well" style="padding-top:0px">
            <div class="box">
                <div class="head">抓住时间</div>
                <div style="margin-left:10px;margin-right:10px;margin-bottom:10px;">“谁有时间进行规划？”

    无论有多忙，你都应该抽出时间进行规划。越是觉得自己没有时间，你越应该仔细地规划自己的时间。比如说你可以在每天开始或结束的时候抽出十分钟来进行规划——你将因此得到数倍的回报。 </div>
       		</div>
        </div>
    </div>
    	<div class="modal hide fade" id="myModal">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">×</button>
			<h3>新建类型</h3>
		</div>
		<div class="modal-body">

			<form class="form-horizontal" action="#"
				method="post">
				<fieldset>
					<div class="control-group" id="typeDiv">
						<label class="control-label">类型</label>
						<div class="controls">
							<input id="type" type="text" name="type"><br/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">颜色</label>
						<div class="controls">
							<input id="color" name="color" type="text" style="width:30px;">
						</div>
					</div>
				</fieldset>
			</form>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn" data-dismiss="modal">关闭</a> 
			<a href="#"class="btn btn-primary" id="submit-edit">保存</a>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#color").colorPicker();
			$(".colorPicker-picker").css({"float":"left","height":"25px","width":"40px","border-radius":"3px 3px 3px 3px","border":"1px solid #ccc","margin-right":"3px"});
			$("#showModal").click(function() {
				$('#myModal').modal('show');
			});	
			$(".colorPicker-picker").change(function() {
				$("#color").val($(this).css(background-color));
			});
			$("#type").focus(function() {
				$("#typeDiv").removeClass("error");
			});
			$("#type").blur(function() {
				if($(this).val().trim() == ""){
					$("#typeDiv").addClass("error");
				}
			});
			$("#submit-edit").click(function() {
				var color = $("#color").val();
				var type = $("#type").val();
				if(type.trim() != "") {
					$.post("${basePath}/task-ajax/newTaskType",{"color":color,"type":type},function(id){
						$("option").remove("#showModal");
						$("#typeSelect").append("<option selected='selected' value=" + id + ">" + type + "</option>");
						$("#typeSelect").append("<option id='showModeal'>新建类型</option>");
					});
					$('#myModal').modal('hide');
				} else {
					$("#typeDiv").addClass("error");
				}
				
			});	
			$("#start").focus(function() {
				$("#startDiv").removeClass("error");
				$("#error").text("");
			});
			$("#start").blur(function() {
				if($(this).val().trim() == ""){
					$("#startDiv").addClass("error");
				}
			});
			$("#title").focus(function() {
				$("#titleDiv").removeClass("error");
			});
			$("#title").blur(function() {
				if($(this).val().trim() == ""){
					$("#titleDiv").addClass("error");
				}				
			});
			$("#end").focus(function() {
				$("#endDiv").removeClass("error");
				$("#error").text("");
			});
			$("#end").blur(function() {	
				if($(this).val().trim() == ""){
					$("#endDiv").addClass("error");
				}
			});
			$("#btn").click(function(){
				if($("#title").val().trim() == ""){
					$("#titleDiv").addClass("error");
				}else if($("#start").val().trim() == ""){
					$("#startDiv").addClass("error");
				}else if($("#end").val().trim() == ""){
					$("#endDiv").addClass("error");
				}else if($("#start").val() >$("#end").val()) {
					$("#endDiv").addClass("error");
					$("#startDiv").addClass("error");
					$("#error").text("结束时间必需大于开始时间");
				}else{
					$("#myform").submit();				
				}
			});
		});
	</script>	
</body>
</html>